﻿<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jOrgChart - A jQuery OrgChart Plugin</title>
        <link rel="stylesheet" href="__APP__/Public/css/common.css" />
    <link rel="stylesheet" href="__APP__/Public/css/public02.css" />
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/jquery.jOrgChart.css"/>
    <link rel="stylesheet" href="__APP__/Public/js/tree/css/custom.css"/>
    <link href="__APP__/Public/js/tree/css/prettify.css" type="text/css" rel="stylesheet" />
 
    <script type="text/javascript" src="__APP__/Public/js/tree/prettify.js"></script>
    
    <!-- jQuery includes -->
    <script type="text/javascript" src="__APP__/Public/js/tree/jquery.min.js"></script>
    <script type="text/javascript" src="__APP__/Public/js/tree/jquery-ui.min.js"></script>
    <link rel='stylesheet' href='__APP__/Public/css/jquery-ui.css' type='text/css' >
    
    <script src="__APP__/Public/js/tree/jquery.jOrgChart.js"></script>
    <script src="__APP__/Public/js/functions.js"></script>
    
 	<style>
logo{ width:814px; height:32px; background:url(__APP__/Public/images/logo.png);  display:inline-block; margin-top:26px; margin-bottom:20px}
	</style>
 </head>

 
  <body>
    <div id="header" class="header">
        <a href="#" class="logo"></a>fff
        <span style="float:right;margin-top: 26px;color: black;">{:L('header_tag1')}<br />{:L('header_tag2')}</span>
    </div>
	   <div class="container02">
        <div class="main">
        	<include file="Share:userViewNavigate" />
			

	<ul id="org" style="display: none"><?php echo($tree);?></ul>           
    
    <div id="chart" class="orgChart"></div>
    
    <div id="genealogyInfoDialog" style="display: none;">
		<form id="form1"  method="post">
			<input name='opt' type='hidden' value={$opt} />
			<input id='chickedNodeId' name='chickedNodeId' type='hidden' />
			<input id="uid" name="uid" type="hidden" value="{$uid}"/>
			<li>{$Think.lang.firstname}:<input id="fname" name="fname" type="text" /></li>
			<li>{$Think.lang.lastname}:<input id="lname" name="lname" type="text" /></li>
			<li>{$Think.lang.secondname}:<input type="text" class="input02" name='secondname'/></li>
			<li>{$Think.lang.user_gender}:<select name="gender">
								<option value="0">{$Think.lang.female}</option>
								<option value="1" selected='selected'>{$Think.lang.male}</option>
							</select>
			</li>
			<li>{$Think.lang.birthday}: <input id='birthday' name='birthday' readonly="readonly"  type="text" class='input02'/></li>
			<li>{$Think.lang.deathday}: <input id='deathday' name='deathday' readonly="readonly"  type="text" class='input02'/></li>
			
			<if condition="count($data) eq 0">
				<li>{$Think.lang.user_name_list}:
					<select id="node" name="nodeId">
						<option value='0' selected>{$Think.lang.empty}</option>
					</select>
				</li>
				<input type='hidden' name='relationship' />
			<else />
				<li>{$Think.lang.user_name_list}:
					<select id="node" name="nodeId">
					<foreach name="data" item="v">
						<option value="{$v.id}">{$v.name}</option>
					</foreach>
					</select>
				</li>
				<li>
					{$Think.lang.relation}
					<select id="relationship" name="relationship">
						<option value="0">{$Think.lang.parent}</option>
						<option value="1" selected="selected">{$Think.lang.children}</option>
					</select>
				</li>
			</if>
			<input type='hidden' id="avatar" name='avatar' />
			<input type="submit" value="{$Think.lang.submit}" />
		</form>
	</div>		
	</div></div>

<script>
	var chickedNodeId = '';
	$(function() {
	    $("#org").jOrgChart({
	        chartElement : '#chart',
	        dragAndDrop  : true,
	        nodeClickCallback: function(node){
	        	$('.orgChart div').css('color', '#fff');
	        	$(node).css('color', 'red');
	        	chickedNodeId = $(node).attr('id');
				$('#chickedNodeId').val(chickedNodeId);
	        }
	    });
	    
	    $("#addNode").click(function(){
	    	showDialog();
	    	$('#form1').attr('action', '__URL__/addGenealogy');
	    });
	    
	    $('#delNode').click(function(){
	    	if (chickedNodeId == '') {
	    		alert('{$Think.lang.pls_select_one}');
	    		return false;
	    	}
			$.post('__URL__/deleteGenealogyChild', {id:chickedNodeId}, function(data){
				var obj = $.parseJSON(data);
				if (obj.status == 0) {
					alert('{$Think.lang.delete_failed}');
				} else if (obj.status == 1) {
					//alert('{$Think.lang.delete_success}');
					location.href = '/Users/genealogy?uid={$uid}&opt={$opt}';
				} else if(obj.status == 2) {
					alert('{$Think.lang.can_only_delete_child_node}');
				}
			});
	    });
	    
	    $('#editNode').click(function(){
	    	
	    });
	});
	
	function showDialog() {
		$('#genealogyInfoDialog').dialog({
			width: 600,
            height: 420,
            modal: false,
            title: "{$Think.lang.genealogy}",
            create: function () { },
            open: function () { },
            close: function () { }
		});
		
	}
	
	function getGenealogyData(id) {
		var url = "/Users/getGenealogyInfo";
		$.post(url, {id:id}, function(data){
			var obj = $.parseJSON(data);
			if (obj.status == 1) {
				setField(obj);
			}
		});
	}
	
	function setField(obj) {
		if (obj != null) {
			$('#fname').val(obj.data['firstname']);
			$('#lname').val(obj.data['lastname']);
		}
	}
	
	function finish() {
		location.href = "/Users/userProfile?uid={$uid}&opt={$opt}";
	}
	
</script>
    <!--footer开始-->
    <div id="footer">
        <div class="main">
            <div class="leftside">
                <a href="#">Offrir un Sourire Eternel</a></div>
            
            <div class="leftside ml118">
                <a href="#">｜Qui sommes nous?</a> <a href="#">｜Mentions légales</a> <!-- <a href="/Public/contactUs">｜联系我们</a> -->
            </div>
            <div class="rightside">
                <a href="/Public/FAQ">FAQ</a>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
    <!--footer结束-->
</body>
</html>
